<style lang="scss">
$cls: '.z-cell-item';

.z-cell-item {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  &[vertical] {
    display: block;
    &.has-label {
      .z-cell-item__label {
        text-align: var(--z-cell-item__vertical-text-align, left);
        padding-bottom: var(--z-cell-item__vertical-padding-bottom, 10px);
      }
    }
    text-align: left;
  }
  &.has-label {
    .z-cell-item__label {
      width: var(--z-cell-item-label-width, 100px);

      padding-right: var(--z-cell-item-padding-right, 10px);
    }
  }
  &__label {
    text-align: var(--z-cell-item-text-align, right);
  }
  &__content {
    //flex: 1;
  }
  &:not([vertical]) {
    #{$cls}__content {
      flex: 1;
      text-align: left;
    }
  }

}
.z-cell-item + .z-cell-item {
  margin-top: var(--z-cell-item-margin-top, 15px);
}
</style>

<template>

<!--  {{labelWidth + ''}}-->
<!--  {{ui.label_item_json}}-->
<!--  {{labelItemStyle}}-->
  <div :vertical="vertical" align="middle"
          class="z-cell-item" :class="{'has-label': label}"
          type="flex">
    <div class="z-cell-item__label" v-if="showLabel"
         :style="[labelStyle, labelItemStyle]">{{label}}</div>
    <div class="z-cell-item__content">
      <div class="z-cell-item__con"><slot></slot></div>
      <div class="z-cell-item__desc">{{desc}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ZCellItem',
  props: {
    label: String,
    vertical: Boolean,
    desc: String,
    labelPosition: String,
    labelWidth: String,
    hiddenLabel: {
      type: Boolean,
      default: false
    },
    ui: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  computed: {
    labelItemStyle() {
      if (this.ui?.label_item_json) {
        try {
          let ret = {}
          let obj = ZY.JSON5.parse(this.ui?.label_item_json)
          // console.log(obj)
          let data = obj.data ?? {}
          if (data['label-width']) {
            ret['width'] = data['label-width']
          }
          if (data['hidden']) {
            ret['display'] = 'none'
          }
          return ret
          // return obj.data ?? {}
        } catch (e) {
          return {}
        }
      }
      return {}
    },
    vertical() {
      if (this.labelPosition === 'top') {
        return true
      }
      if (this.ui?.label_item_json) {
        try {
          let ret = {}
          let obj = ZY.JSON5.parse(this.ui?.label_item_json)
          // console.log(obj)
          let data = obj.data ?? {}
          if (data['label-position'] === 'top') {
            return true
          }
        } catch (e) {
          return {}
        }
      }
      return null
    },
    labelStyle() {
      // console.log(this.labelWidth)
      let labelWidth = this.label ? this.labelWidth : ''
      return {
        width: labelWidth
      }
    },
    showLabel() {
      return !this.hiddenLabel
    }
  }
}
</script>
